<template>
	<view class="page">
		<view v-for="(item,index) in dataList" :key="index">
			<card-box :title="item.title" :from="item.from" :num="item.num" :time="item.time" :isTop="item.isTop"
				:image="item.image">

				<template v-slot:tips>
					<view class="search" v-if="item.showSearch">
						<text style="margin-right: 5px;">搜索:</text>
						<view class="search-item">
							好物推荐
						</view>
						<view class="search-item">
							精选好物
						</view>
					</view>
				</template>
			</card-box>
		</view>
	</view>
</template>

<script>
	import cardBox from '../../components/card.vue';
	export default {
		components: {
			cardBox
		},
		data() {
			return {
				dataList: [
					// 数据1：热点社会新闻（置顶）
					{
						title: "全国多地启动冬季供暖，部分城市推出节能补贴政策",
						from: "中国新闻网",
						num: 2389,
						time: "2025.10.29",
						isTop: true
					},
					// 数据2：科技产品发布（非置顶）
					{
						title: "某科技公司新款折叠屏手机亮相，续航能力提升40%",
						from: "科技日报",
						num: 15677,
						time: "2025.10.28",
						image: '/static/news1.jpeg',
						isTop: false,
						showSearch: true
					},
					// 数据3：体育赛事结果（置顶）
					{
						title: "国足1-0击败越南队，取得世预赛亚洲区首胜,国足1-0击败越南队，取得世预赛亚洲区首胜",
						from: "体坛周报",
						num: 5621,
						time: "2025.10.29",
						image: '/static/news1.jpeg',
						isTop: true
					},
					// 数据4：财经市场动态（非置顶）
					{
						title: "A股三大指数小幅收涨，新能源板块领涨两市",
						from: "财经网",
						num: 892,
						time: "2025.10.28",
						image: '/static/news11.jpeg',
						isTop: false
					},
					// 数据5：文化活动资讯（置顶）
					{
						title: "2025故宫文创展在上海开展，近百件珍品首次亮相",
						from: "文化中国",
						num: 1245,
						time: "2025.10.29",
						isTop: true
					},
					// 数据6：教育政策更新（非置顶）
					{
						title: "教育部：中小学课后服务将新增科普类课程选项",
						from: "中国教育报",
						num: 987,
						time: "2025.10.27",
						isTop: false
					},
					// 数据7：健康养生知识（非置顶）
					{
						title: "医生提醒：冬季预防流感，需做好这3项防护措施",
						from: "健康时报",
						num: 1832,
						time: "2025.10.28",
						isTop: false
					},
					// 数据8：国际新闻热点（置顶）
					{
						title: "全球气候峰会在巴黎召开，多国承诺2030年减排目标",
						from: "环球网",
						num: 3210,
						time: "2025.10.29",
						isTop: true
					},
					// 数据9：娱乐影视资讯（非置顶）
					{
						title: "国产科幻电影《星际归途》定档12月，首支预告片发布",
						from: "娱乐前线",
						num: 4568,
						time: "2025.10.27",
						isTop: false
					},
					// 数据10：交通出行提示（非置顶）
					{
						title: "国庆后高速返程高峰将至，高速部门建议错峰出行",
						from: "交通之声",
						num: 765,
						time: "2025.10.28",
						isTop: false
					}
				]
			}
		},

		methods: {

		}
	}
</script>

<style>
	.page {
		background-color: whitesmoke;
	}

	.search {
		margin-top: 10px;
		display: flex;
		align-items: center;
		font-size: 12px;
		color: dodgerblue;
	}

	.search-item {
		border: 1px solid dodgerblue;
		border-radius: 10px;
		padding: 2px;
		margin-right: 5px;
	}
</style>